<!DOCTYPE html>
<html manifest="pinyin.manifest">

<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>汉字到拼音</title>

</head>
<link rel="stylesheet" type="text/css" href="pinyin.css">

<body>

<nav>
    <a class="nav-link" href="hanzi.html">汉字学习</a>
    <a class="nav-link" href="pinyin.html">拼音学习</a>
    <a class="nav-link" href="bihua.html">笔画学习</a>
</nav>

<div class="container">
    <div>
        <input type="text" style="width:250px;height: 30px;float: left;display: none;" placeholder="在此处输入要学习的汉字"
               id="pyText"
               onchange="textchanged();" onkeyup="textchanged();">
        <select id="class" style="float: left;">
            <option value="一年级上">一年级上</option>
            <option value="一年级下">一年级下</option>
            <option value="二年级上">二年级上</option>
            <option value="二年级下">二年级下</option>
            <option value="三年级上">三年级上</option>
            <option value="三年级下">三年级下</option>
            <option value="四年级上">四年级上</option>
            <option value="四年级下">四年级下</option>
            <option value="五年级上">五年级上</option>
            <option value="六年级上">六年级上</option>
            <option value="六年级下">六年级下</option>
        </select>
        <select id="selectType" style="float: left;">
            <option value="随机">随机</option>
            <option value="顺序">顺序</option>
        </select>
        <input type="button" style="height: 42px;float: left;" id="btnStart" value="开始学习"/>

    </div>
   <div style="clear: both;"><span>拼音：</span><span id="py"></span><span style="padding-left: 20px; " id="tips"></span></div>
    <div  style="float: left;clear: both;">
        <div style="float: left;" id="pyShow"></div>
    </div>

    <div id="pySelect"></div>

    <audio id="pymp3" src=""></audio>
</div>
<script src="pydic.js"></script>
<script src="pymp3.js"></script>
<script src="query.js"></script>
<script src="cnchar.draw.min.js"></script>
<script src="cnclass.js"></script>
<script src="cnchar.min.js"></script>

<!-- import cnchar.js from cdn -->
<script src="jquery.min.js"></script>
<script type="text/javascript">


    $(document).ready(function () {

        var hasLearned = [];


        $('#btnStart').on('click', function () {
            var classid = $('#class').val();
            var selectType = $('#selectType').val();
            var charset = cn_dict[classid];
            // debugger
            if (selectType == "随机") {
                // get a random char from charset

                var char = charset[Math.floor(Math.random() * charset.length)];
                while (hasLearned.indexOf(char) != -1) {
                    char = charset[Math.floor(Math.random() * charset.length)];
                    if (hasLearned.length == charset.length) {
                        showTips("已经学完了",'green');
                        return;
                    }
                    break;
                }
                hasLearned.push(char);

                text = char.replace(/\(.*\)/g, "");
                var py = text.spell('tone');
                $('#py').text(py);
                showBH(text)


            }


        });


    });

    function textchanged() {

    }

    function showBH(text) {
        // show(pys);
        if (text.trim().length > 0) {
            setTimeout(function () {
                showTips('请按笔顺输入！');
                cncharDraw(text, {
                    el: '#pyShow',
                    type: 'test',
                    strokeColor: 'red',
                    strokeWidth: 2,
                    style: {length: 350},
                    test: {
                        onTestStatus: function (data) {
                            // debugger;
                            if (data.status === 'complete') {
                                //show tips
                                showTips('你真棒，写对了！', 'green');
                                $('#btnStart').trigger('click');
                            } else if (data.status === 'mistake') {
                                //show tips
                                showTips('笔画写错了，再试试！', 'red');
                            } else if (data.status === 'correct') {
                                //show tips
                                showTips('笔画写对，真棒！', 'green');
                            }
                        }
                    }
                });
            }, (text.stroke('count') + 2) * 1000);
            cncharDraw(text, {
                el: '#pyShow',
                type: 'animation',
                strokeColor: 'red',
                strokeWidth: 2,
                style: {length: 350, float: 'left'},

            });
        }
    }


    function getPinyin(text) {
        var ret = [];
        for (var i = 0; i < text.length; i++) {
            var py = pyDic[text[i]];
            if (py) {
                ret.push(py);
            }
        }
        return ret;

    }

    //show tips with color
    function showTips(text, color) {
        text = '<span style="color:' + color + '">' + text + '</span>';
        $('#tips').html(text);
    }

</script>

</body>


</html>